<template>
  <div>
    <div ref="editorContainer" class="editor-container"></div>
    <!-- 隐藏的 textarea 用于调试或与其他系统集成 -->
    <textarea v-model="editorContent" style="display: none;"></textarea>
  </div>
</template>

<script setup>
import { onMounted, watch, ref, computed } from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 导入 Quill 的样式文件
import { uploadAXIOS } from '../../api/common.js';

// 定义组件属性
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

// 定义自定义事件
const emit = defineEmits(['update:modelValue']);

// 引用编辑器容器元素
const editorContainer = ref(null);
let quillInstance = null;

// 定义一个响应式的 editorContent
const editorContent = ref(props.modelValue);

// 在组件挂载后初始化 Quill 编辑器
onMounted(() => {
  quillInstance = new Quill(editorContainer.value, {
    theme: 'snow',
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'], // 基本的文字格式化按钮
        [{ color: [] }, { background: [] }], // 文字和背景颜色选择器
        [{ align: [] }], // 对齐选项
        ['image'], // 图片上传按钮
        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小选项
        [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong'] }], // 字体选项
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题级别
        [{ indent: '-1' }, { indent: '+1' }], // 缩进选项
        [{ list: 'ordered' }, { list: 'bullet' }], // 列表类型
        [{ script: 'sub' }, { script: 'super' }], // 下标和上标
        ['blockquote', 'code-block'], // 引用和代码块
        ['clean'], // 清除格式
      ],
    },
  });

  // 监听编辑器内容的变化
  quillInstance.on('text-change', () => {
    const content = quillInstance.root.innerHTML;
    editorContent.value = content;
    emit('update:modelValue', content);
  });

  // 设置编辑器的初始内容
  quillInstance.root.innerHTML = props.modelValue;

  // 添加一个自定义的图片上传处理程序
  const toolbar = quillInstance.getModule('toolbar');
  toolbar.addHandler('image', imageHandler);
});

// 图片上传处理函数
const imageHandler = async () => {
  // 创建一个文件输入元素
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

  // 处理文件选择事件
  input.addEventListener('change', async () => {
    const file = input.files[0];
    if (!file) return;

    // 使用上传函数上传选定的文件
    const result = await uploadAXIOS({ file });
    const imageUrl = result.data.data;

    // 获取编辑器中的当前选区
    const range = quillInstance.getSelection();
    // 在光标当前位置插入上传的图片
    quillInstance.insertEmbed(range.index, 'image', imageUrl);
  });

  // 触发文件选择对话框
  input.click();
};

// 监听 `modelValue` 属性的变化并更新编辑器的内容
watch(
  () => props.modelValue,
  (newValue) => {
    if (quillInstance && newValue !== editorContent.value) {
      quillInstance.root.innerHTML = newValue;
      editorContent.value = newValue;
    }
  }
);

// 调试函数，用于打印编辑器当前的 HTML 内容
const logEditorContent = () => {
  console.log(quillInstance.root.innerHTML);
};
</script>

<style scoped>
.editor-container {
  width: 100%;
  height: 100%;
}

/* 自定义 Quill 样式 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6' !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
  content: '宋体' !important;
}

.ql-font-SimSun {
  font-family: 'SimSun';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
  content: '黑体' !important;
}

.ql-font-SimHei {
  font-family: 'SimHei';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
  content: '微软雅黑' !important;
}

.ql-font-Microsoft-YaHei {
  font-family: 'Microsoft YaHei';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
  content: '楷体' !important;
}

.ql-font-KaiTi {
  font-family: 'KaiTi';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
  content: '仿宋' !important;
}

.ql-font-FangSong {
  font-family: 'FangSong';
}
</style>